<template>
  <div class="home flexBox">
    <div class="nav">
      <div class="nav-title">{{title}}</div>
    </div>
    <component :is="components[item.component]" :datas="item" v-for="(item, index) in channelList" :key="index" :ref="item.component"/>
  </div>
</template>
<script>
import { Icon } from 'yj-mob-ui';
import { Base64 } from 'js-base64';
import { getParameter } from '../../common/comfun';
import { getPart } from '@/api/getContentApi';
import { components, components1 } from '../../common/setting';
export default {
  components: {
    [Icon.name]: Icon,
    ...components
  },
  data () {
    return {
      title: '',
      channelList: [],
      components: components1
    };
  },
  async created () {
    const queryObj = JSON.parse(this.$route.query.requestParam);
    this.title = queryObj.title;
    const templateUrl = queryObj.templateUrl ? Base64.decode(queryObj.templateUrl) : '';
    if (templateUrl.indexOf('.json') !== -1) {
      const url = getParameter(templateUrl, 'alias'),
        templateType = localStorage.getItem('templateType'),
        channelRes1 = await getPart(this.filterPath('alias', url), templateType);
        console.log(channelRes1, 'channelRes1');
      if (channelRes1) {
        this.channelList = JSON.parse(channelRes1.component);
        console.log(this.channelList, 'channelList');
      }
    }
  },
  methods: {
    filterPath (name, type) {
      const mainList = JSON.parse(localStorage.getItem('mainList')),
      fiterPath = mainList.filter(item => item[name] === type);
      return fiterPath.length > 0 ? fiterPath[fiterPath.length - 1].jsonPath : '';
    }
  }
};
</script>
<style  lang="scss" scoped>
.flexBox{
  display: flex;
  flex-direction: column;
}
.nav{
  width:100%;
  position: relative;
  padding:20px 0;
  display: flex;
  flex-shrink: 0;
  i{
    width:20px;
    height:20px;
    position: absolute;
    left:17px;
    top:22px;
  }
  .nav-title{
    width:100%;
    text-align: center;
    font-size: 20px;
    font-family: PingFang SC-Medium, PingFang SC, sans-serif;
    font-weight: 500;
    color: #000000;
  }
}
</style>
